<template>
    <div>
        <el-form :model="productForm" label-width="120px" :rules="productFormRules" ref="productFormRef">
            <el-form-item label="产品名称" prop="productName">
              <el-input v-model="productForm.productName" />
            </el-form-item>
            <el-form-item label="介绍" prop="introduction">
              <el-input v-model="productForm.introduction" type="textarea"/>
            </el-form-item>
            <el-form-item label="细节" prop="detail">
              <el-input v-model="productForm.detail" type="textarea"/>
            </el-form-item>
            <el-form-item label="产品图片" prop="cover">
                <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :auto-upload="false"
                :on-change="handleChangeCover"
              >
                <img
                  v-if="productForm.cover"
                  :src="productForm.cover "
                  class="cover"
                />
                <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
              </el-upload>
            </el-form-item>
        
            
            <el-form-item label="">
              <el-button type="primary" @click="submitForm()">添加产品</el-button>
            </el-form-item>
          </el-form>
    </div>
</template>

<script setup>
import {ref,reactive} from 'vue'
import editor from '../../components/editor/editor.vue'
import { Plus, } from "@element-plus/icons-vue";
import upload from '@/util/upload';
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router";
const router = useRouter();
import axios from "axios"
const productFormRef = ref();
const productForm = reactive({
    productName:"",
    introduction:"",
    detail:"",
    cover:"",
    file:null,
 
})
const handleChange = (data)=> {
    productForm.content = data;
    console.log(data);
}
const handleChangeCover = (file) => {
  console.log('file',file)
  console.log('URL.createObjectURL(file.raw)',URL.createObjectURL(file.raw))
  productForm.cover = URL.createObjectURL(file.raw);
  productForm.file = file.raw
//   uploadAvatar = 
}
const productFormRules = reactive({
  productName:[{ required: true, message: "请输入标题", trigger: "blur" }],
    introduction:[{ required: true, message: "请输入介绍", trigger: "blur" }],
    detail:[{ required: true, message: "请输入细节", trigger: "blur" }],
    cover:[{ required: true, message: "请上传图片", trigger: "blur" }],
})

const submitForm = () => {
    productFormRef.value.validate(async(valid) => {
        if(valid) {
            console.log("productForm",productForm);
            const res = await upload("/adminapi/product/add",productForm);
            if(res.data.code == 200) {
                ElMessage.success("添加成功");
                router.push('/productManage/productList');
            }else {
                ElMessage.error("添加失败");
            }
        }
    })
}
</script>

<style lang="scss" scoped>
.cover {
  width: 178px;
  height: 178px;
}
</style>